<template>
  <div>
    <div ref="echartsRef" style="width: 1200px; height: 600px"></div>
  </div>
</template>

<script setup lang="ts">
//引入echarts
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
import { getSimpleData } from '@/api/echarts'
import type { Echarts } from '@/types/echarts'

// 获取标记节点
const echartsRef = ref<HTMLDivElement>()
onMounted(() => {
  const myChart = echarts.init(echartsRef.value, 'dark')
  getData(myChart)
})

// 获取数据
const echartsInfo = ref([] as Echarts[])
const getData = async (myChart: echarts.ECharts) => {
  const res = await getSimpleData()
  echartsInfo.value = res.data.data
  const option = {
    title: {
      text: 'xxx 公司的销量图'
    },
    tooltip: {},
    legend: {
      data: ['销量']
    },
    xAxis: {
      data: echartsInfo.value.map(item => item.name)
    },
    yAxis: {},
    series: [
      {
        // radius: ['40%', '70%'],
        // avoidLabelOverlap: false,
        // itemStyle: {
        //   borderRadius: 10,
        //   borderColor: '#fff',
        //   borderWidth: 2
        // },
        name: '销量',
        type: 'bar',
        data: echartsInfo.value.map(item => item.value)
      }
    ]
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}
// 指定图表的配置项和数据
</script>
